<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Swiper</h1>
      <p class="tdesign-demo-wrap__info">开发者：luisma</p>
      <p class="tdesign-demo-wrap__info">创建日期：2021-07-13</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign swiper 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">带轮播的警告</h2>
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-swiper">
            <div class="t-swiper__content">
              <div class="t-swiper__swiper-wrap" style="width: 300%;">
                <div class="t-alert t-alert--success">
                  <div class="t-alert__icon">
                    <i class="t-icon t-icon-success_fill"></i>
                  </div>
                  <div class="t-alert__content">
                    <div class="t-alert__message">
                      <div class="t-alert__description">
                        【到期提醒】 1/3, 您有3台服务器已到期，自动进入回收站，1天12小时后将被彻底销毁请及时续费
                      </div>
                      <div class="t-alert__operation">
                        相关操作
                      </div>
                    </div>
                  </div>
                </div>
                <div class="t-alert t-alert--success">
                  <div class="t-alert__icon">
                    <i class="t-icon t-icon-success_fill"></i>
                  </div>
                  <div class="t-alert__content">
                    <div class="t-alert__message">
                      <div class="t-alert__description">
                        【到期提醒】 2/3, 您有3台服务器已到期，自动进入回收站，1天12小时后将被彻底销毁请及时续费
                      </div>
                      <div class="t-alert__operation">
                        相关操作
                      </div>
                    </div>
                  </div>
                </div>
                <div class="t-alert t-alert--success">
                  <div class="t-alert__icon">
                    <i class="t-icon t-icon-success_fill"></i>
                  </div>
                  <div class="t-alert__content">
                    <div class="t-alert__message">
                      <div class="t-alert__description">
                        【到期提醒】 3/3, 您有3台服务器已到期，自动进入回收站，1天12小时后将被彻底销毁请及时续费
                      </div>
                      <div class="t-alert__operation">
                        相关操作
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul class="t-swiper__trigger-wrap">
              <li class="t-swiper__trigger--active" onclick="handleSwiper(this, 0)"></li>
              <li onclick="handleSwiper(this, '-100%')"></li>
              <li onclick="handleSwiper(this, '-200%')"></li>
            </ul>
            <div class="t-swiper__close">
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

<!--    </div>-->

<!--      &lt;!&ndash; 灰底区域 可多个 &ndash;&gt;-->
<!--      <div class="tdesign-demo-item__body">-->

<!--        &lt;!&ndash; 内容区 Start&ndash;&gt;-->



<!--        &lt;!&ndash; 内容区 End&ndash;&gt;-->

<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 组件状态 &ndash;&gt;-->
<!--    <div class="tdesign-demo-item">-->
<!--      <h2 class="tdesign-demo-item__title">状态</h2>-->

<!--      &lt;!&ndash; 灰底区域 可多个 &ndash;&gt;-->
<!--      <div class="tdesign-demo-item__body">-->

<!--        &lt;!&ndash; 内容区 Start&ndash;&gt;-->

<!--        &lt;!&ndash; tdesign-demo-block block内容容器，加了上间距 &ndash;&gt;-->
<!--        <div class="tdesign-demo-block">-->

<!--        </div>-->

<!--        &lt;!&ndash; 内容区 End&ndash;&gt;-->

<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 组件类型 &ndash;&gt;-->
<!--    <div class="tdesign-demo-item">-->
<!--      <h2 class="tdesign-demo-item__title">类型</h2>-->
<!--      <div class="tdesign-demo-item__body">-->

<!--        &lt;!&ndash; 内容区 Start&ndash;&gt;-->

<!--        &lt;!&ndash; 内容区 End&ndash;&gt;-->

<!--      </div>-->
<!--      <div class="tdesign-demo-item__body">-->

<!--        &lt;!&ndash; 内容区 Start&ndash;&gt;-->

<!--        &lt;!&ndash; 内容区 End&ndash;&gt;-->

<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 组件尺寸 &ndash;&gt;-->
<!--    <div class="tdesign-demo-item">-->
<!--      <h2 class="tdesign-demo-item__title">尺寸(如果有)</h2>-->
<!--      <div class="tdesign-demo-item__body">-->

<!--        &lt;!&ndash; 内容区 Start&ndash;&gt;-->

<!--        &lt;!&ndash; 内容区 End&ndash;&gt;-->
<!--    </div>-->

  </div>

</body>
<script>
  function handleSwiper(el, left) {
    const swiperWrap = el.parentNode.parentNode.getElementsByClassName('t-swiper__swiper-wrap')[0]
    const brothers = el.parentNode.children
    for(const bro of brothers) {
      bro.classList.remove(`t-swiper__trigger--active`)
    }
    el.classList.add(`t-swiper__trigger--active`)
    swiperWrap.style.left = left
  }

  function handleClose(el) {
    el.parentNode.addEventListener('transitionend', () => {
      el.parentNode.classList.add('t-is-hidden')
    }, true)
    el.parentNode.classList.add('t-alert--closing')
  }

  Array.prototype.forEach.call(document.getElementsByClassName('t-alert__close'), el => {
    el.addEventListener('click', () => handleClose(el), true)
  })
  Array.prototype.forEach.call(document.getElementsByClassName('t-swiper__close'), el => {
    el.addEventListener('click', () => handleClose(el), true)
  })
</script>
</html>
